<script setup>
import Outbound from "@/components/CreateOutbound.vue";
// import { Search } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import {getStatus} from "@/api/getStatus";

import {showOutbound} from "@/api/showOutBoundList"

const tableData =ref([]);

const currentPage=ref("1");

const totalPage=ref(0);

const arrowLeftdisabled=ref(true);
const arrowRightdisabled=ref(false);

let orderStatus = ref("出库订单") ;
import { useUserStore } from "@/stores/user";
const userStore=useUserStore();
const userId=userStore.userId;
const judgeArrow =(totalPage,currentPage)=>{

  if(totalPage===0||totalPage===1){
   arrowRightdisabled.value=true;
   arrowLeftdisabled.value=true;
   return;
  }else{
    arrowRightdisabled.value=false;
    
  }


  if(Number(currentPage)=== totalPage){
    arrowRightdisabled.value=true;
  }

  if(Number(currentPage)!==1){
   

    arrowLeftdisabled.value=false;
  }else{
    arrowLeftdisabled.value=true;
  }
}

const loading = ref(false);
const outBoundList = async () => {
  loading.value = true;
  const res=await showOutbound({

    // create_User:userId,
    // inbound_Id:44,
    // number:100,
    pageNum:currentPage.value,
    pageSize:"6",
  });//需要传数据吗？
  loading.value = false;
 
  tableData.value=res.data.data.content;
  totalPage.value=res.data.data.totalPages;
  console.log("totalpage"+totalPage.value);
  judgeArrow(totalPage.value,currentPage.value);

};



const displayStatus=()=>{

  
    return "已出库";


}


// setup里就是onCreated
const getOutBoundTable=async ()=>{
  loading.value = true;
  const res=await showOutbound({
  
    pageNum:"1",
    pageSize:"6",
  });

  tableData.value=res.data.data.content;
  totalPage.value=res.data.data.totalPages;
  console.log("totalpage"+totalPage.value);
  loading.value = false;
  if(totalPage.value===0||totalPage.value===1){
   arrowRightdisabled.value=true;
   console.log(totalPage.value)
}
}


getOutBoundTable();








const setStatusClass = (status) => {

    
    return "outBound-status";
 
};


const changePageLeft=()=>{

  let Pagenumber= Number(currentPage.value) ;
  Pagenumber-=1;
   if(Pagenumber===1){
    arrowLeftdisabled.value=true;
   }
   arrowRightdisabled.value=false;
   currentPage.value=`${Pagenumber}`;
   outBoundList();

  

};
const changePageRight=()=>{



  let Pagenumber= Number(currentPage.value) ;
  Pagenumber+=1;
   if(Pagenumber===totalPage.value){
    arrowRightdisabled.value=true;
   }
   arrowLeftdisabled.value=false;
   currentPage.value=`${Pagenumber}`;
   outBoundList();

};

const warehouseDisplay=(warehouse)=>{
  if(warehouse==="A"){
    return "生鲜仓库";
  }else if(warehouse==="B"){
    return "常用工具仓库";
  }else if(warehouse==="C"){
    return "危险品仓库";
  }else if(warehouse==="D"){
    return "电子产品仓库";
  }else{
    return "其他仓库";
  }

}



</script>

<template>
  <div >
  
    <Outbound></Outbound> 

    <div class="divider-with-text">
      <span>{{ orderStatus }}</span>
    </div>

    <el-table v-loading="loading" :data="tableData"  stripe style="width: 100%">
      <el-table-column prop="id" label="出库订单ID" width="120" />
      <el-table-column prop="name" label="货物名称" width="120" />
      <el-table-column prop="kind" label="货物类型" width="120" />
      <!-- <el-table-column prop="unit" label="空间单位" width="80" /> -->
      <!-- <el-table-column prop="warehouse" label="存储位置" width="120" >
        <template v-slot="scope">
          <div>
            {{ warehouseDisplay(scope.row.warehouse)}}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="number" label="出库数量" width="120" />
      <!-- <el-table-column
        prop="checkTime"
        label="剩余数量"
        width="140"
      /> -->
      <el-table-column prop="createTime" label="出库时间" width="140" />
      <el-table-column prop="createUser" label="出库人" width="120" />
      <el-table-column prop="cargoStatus" label="货物状态" width="140">
        <template v-slot="scope">
          <div :class="setStatusClass(scope.row.status)">
            {{ displayStatus(scope.row.status)}}
          </div>
        </template>
      </el-table-column>
      <!-- 待质检，已退货，已入库 -->
    </el-table>


    
    <div class="footerBox">
      <div class="footerPage">
      
        <el-button type="primary" color="pink" @click="changePageLeft" :disabled="arrowLeftdisabled"><el-icon class="el-icon--right"><ArrowLeft /></el-icon></el-button>
        
        <div  class="pageNumber">
          {{currentPage }}/{{totalPage }}
        </div>
       
       
  
      <el-button type="primary" color="pink" :disabled="arrowRightdisabled" @click="changePageRight">
        <el-icon class="el-icon--right"  ><ArrowRight /></el-icon>
      </el-button>
      </div>
    </div>
    
  </div>

  

 
</template>

<style scoped>
.demonstration {
  display: inline-block;
  color: var(--el-text-color-secondary);
  text-align: center;
  font-size: 14px;
  margin: 6px;
}

.flex-layout {
  display: flex;
  margin-bottom: 20px;
}

.flex-layout el-input {
  display: inline-block;
  margin: 50px;
}

.el-button {
  margin: 0 15px;
}
.flex-layout-two {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.divider-with-text {
  display: flex;
  align-items: center;
  text-align: start;
}

.divider-with-text::before,
.divider-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #3c9d19; /* 横杠颜色 */
}

.divider-with-text::before {
  margin-right: 10px; /* 文字和横杠之间的间距 */
}

.divider-with-text::after {
  margin-left: 10px; /* 文字和横杠之间的间距 */
}

.divider-with-text > span {
  white-space: nowrap;
}
.outBound-status {
  color: rgb(205, 156, 40);
 
}

.footerPage {
  justify-content: space-around;
  display: flex;
  height: 5px;
  width:200px;
}
.pageNumber{
  display: inline-block;
  text-align: center;
 line-height: 32px;

}

.footerBox{
  position:absolute;
  bottom:50px;

}
.el-table--striped tbody tr:nth-child(odd) {
  background-color: #cf1b1b; /* 设置奇数行背景色 */
}
.two-check-button{
  display: flex;
  width: 450px;
  justify-content: center;
}
</style>